<template>
  <div class="zycsc">
    <div v-for="(item, index) in lsscList" :key="index" class="zycscitem">
      <div class="icon">
        <img :src="getUrl(item.icon)" alt="" />
      </div>
      <div class="title">
        <div class="num">
          <div class="sz">{{ data[item.field] }}</div>
          <div class="dw">{{ item.dw }}</div>
        </div>
        <div class="wz">{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
    required: true
  }
});
const lsscList = ref([
  {
    num: '205',
    dw: '个',
    title: '注册企业',
    icon: 'zcqy',
    field: 'zcqys'
  },
  {
    num: '5',
    dw: '个',
    title: '农业合作社',
    icon: 'nyhzs',
    field: 'nyhzs'
  },
  {
    num: '205',
    dw: '户',
    title: '产业扶持户数',
    icon: 'cyfchs',
    field: 'cyfchs'
  },
  {
    num: '69600',
    dw: '元',
    title: '产业扶持金额',
    icon: 'cyfcje',
    field: 'cyfcje'
  }
]);
const getUrl = (icon) => {
  return new URL(`../../../../assets/szxc/${icon}.png`, import.meta.url).href;
};
</script>

<style lang="scss" scoped>
.zycsc {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  .zycscitem {
    width: 46%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #165198;
    justify-content: center;
    padding: 14px 8px;
    .title {
      font-weight: 600;
      margin-left: 12px;
      .num {
        display: flex;
        align-items: flex-end;
        .sz {
          font-size: 24px;
        }
        .dw {
          font-size: 14px;
        }
      }
      .wz {
        // width: 120px;
        font-weight: 400;
        font-size: 18px;
        color: #5f96d7;
        word-wrap: break-word;
        overflow-wrap: break-word;
      }
    }
  }

  .zycscitem:nth-child(2) {
    .title {
      .num {
        background: linear-gradient(0deg, #27beff 0%, #1483ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .zycscitem:nth-child(4) {
    .title {
      .num {
        background: linear-gradient(0deg, #00908e 0%, #33ff99 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .zycscitem:nth-child(1),
  .zycscitem:nth-child(3) {
    .title {
      .num {
        background: linear-gradient(269deg, #ffa3a3 0%, #ff5932 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}
</style>
